<template>
  <div id="app">
    <el-page-header @back="()=>{this.$router.go(-1)}" content="撰稿页">
    </el-page-header>
    <vue-editor v-model="content" :disabled="disabled" ref="editor" useCustomImageHandler
      @image-added="handleImageAdded">
    </vue-editor>

    <button @click="drawer = true" class="other-btn">
      <svg t="1642524431355" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1838"
        width="20" height="20" class="icon">
        <path
          d="M512 822c171.208 0 310-138.792 310-310s-138.792-310-310-310-310 138.792-310 310 138.792 310 310 310z m0 90c-220.914 0-400-179.086-400-400S291.086 112 512 112s400 179.086 400 400-179.086 400-400 400z"
          p-id="1839"></path>
        <path
          d="M310.93 638.328c-12.332-21.576-4.836-49.066 16.74-61.398 21.58-12.332 49.068-4.836 61.4 16.74C415.608 640.106 454.586 662 512.004 662c57.418 0 96.398-21.896 122.934-68.328 12.332-21.58 39.82-29.074 61.4-16.74 21.576 12.33 29.072 39.82 16.74 61.396C670.27 713.228 601.248 752 512.004 752c-89.244 0-158.266-38.772-201.074-113.672z"
          p-id="1840"></path>
        <path d="M342 432m-50 0a50 50 0 1 0 100 0 50 50 0 1 0-100 0Z" p-id="1841"></path>
        <path d="M682 432m-50 0a50 50 0 1 0 100 0 50 50 0 1 0-100 0Z" p-id="1842"></path>
      </svg>
    </button>

    <button @click="saveLocation" class="other-btn">
      <svg t="1642588385885" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1609"
        width="20" height="20" class="icon">
        <path
          d="M683.84 170.666667L853.333333 344.704V789.333333a64 64 0 0 1-64 64H234.666667a64 64 0 0 1-64-64V234.666667a64 64 0 0 1 64-64h449.173333zM320 234.645333L234.666667 234.666667v554.666666l85.333333-0.021333V533.333333h384v255.978667L789.333333 789.333333V370.730667l-85.333333-87.637334V384H320v-149.354667zM640 597.333333H384v191.978667h256V597.333333z m-42.666667 64v64h-170.666666v-64h170.666666z m42.666667-426.666666H384v85.333333h256v-85.333333z"
          p-id="1610"></path>
      </svg>
    </button>

    <button @click="upQ" class="other-btn">
      <svg t="1642598846492" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3089"
        width="20" height="20" class="icon">
        <path
          d="M633.341091 613.129258c-11.326976 11.328-29.694299 11.328-41.022299 0l-44.363394-45.106314 0 237.407038c0 16.020882-12.986779 29.007661-29.006637 29.007661l-8.867972 0c-16.020882 0-29.007661-12.985756-29.007661-29.007661L481.073128 564.181453l-48.14144 48.947805c-11.328 11.328-29.694299 11.328-41.022299 0l-6.27082-6.27082c-11.328-11.326976-11.329023-29.694299 0-41.022299L490.889705 458.82287c5.975085-5.976108 13.909801-8.79634 21.736047-8.466835 7.825222-0.328481 15.759939 2.491751 21.735024 8.466835l105.251136 107.013269c11.328 11.328 11.328 29.695323 0 41.022299L633.341091 613.129258z"
          p-id="3090"></path>
        <path
          d="M916.318 403.171386c-20.911262-24.651446-48.196699-44.821835-79.002308-55.130621-6.601348-74.843592-38.726-142.075833-88.228437-192.724373C693.638385 99.288331 616.835162 64.328098 533.007965 64.328098c-61.839417 0-119.489418 18.824741-167.898965 51.543933-44.008306 29.134551-80.095199 69.474304-104.071264 117.881804-52.156894 8.515954-99.245352 34.063817-133.572158 71.257927-39.607066 42.131563-63.371306 99.05604-63.371306 161.357991 0 64.992223 25.965371 124.155694 68.212568 166.737512l-0.652869 0c41.905412 42.911322 99.357915 69.322855 163.399487 69.466118l0-70.370721c-44.683688-0.14224-85.406159-18.486026-114.549919-48.400337-29.714765-30.029944-47.756677-71.267137-47.756677-117.433596 0-43.924395 17.162892-83.816964 44.447305-113.3987 27.28646-29.582759 65.360614-48.854685 107.380636-51.096748 13.202697-0.448208 25.313525-8.516977 30.80561-21.515013 18.482957-43.917232 49.288566-80.670298 87.803765-106.667392 36.738739-24.650423 81.627089-39.442314 129.823787-39.442314 65.131393 0 124.543527 26.89351 167.44257 70.370721 42.687218 43.924395 69.532633 103.978143 69.532633 170.763199 0 16.5837 11.44261 31.374568 28.164456 34.512025 26.406416 4.929266 49.28959 18.376533 66.013483 38.098713 15.402805 19.721157 25.312502 44.820811 25.312502 72.161506 0 31.374568-12.110829 58.716286-32.354895 79.334883-19.363 20.171412-46.647413 32.720216-76.784804 32.720216l-0.669242 0-11.195993 0 0 70.370721 11.195993 0 0.881067 0c48.847521-0.896416 93.085048-21.512966 125.422548-53.338812 32.125675-33.167401 52.369741-78.43642 52.369741-129.085984C958.339046 475.78417 942.056198 434.994162 916.318 403.171386z"
          p-id="3091"></path>
        <path
          d="M894.954437 928.496879c0 16.019859-12.986779 29.007661-29.007661 29.007661L156.013775 957.50454c-16.020882 0-29.007661-12.986779-29.007661-29.007661l0-6.943133c0-16.019859 12.986779-29.007661 29.007661-29.007661l709.934025 0c16.019859 0 29.007661 12.986779 29.007661 29.007661L894.95546 928.496879z"
          p-id="3092"></path>
      </svg>
    </button>

    <button @click="download" class="other-btn">
      <svg t="1642952391135" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1615"
        width="20" height="20" class="icon">
        <path
          d="M469.312 570.24v-256h85.376v256h128L512 756.288 341.312 570.24h128zM1024 640.128C1024 782.912 919.872 896 787.648 896h-512C123.904 896 0 761.6 0 597.504 0 451.968 94.656 331.52 226.432 302.976 284.16 195.456 391.808 128 512 128c152.32 0 282.112 108.416 323.392 261.12C941.888 413.44 1024 519.04 1024 640.192z m-259.2-205.312c-24.448-129.024-128.896-222.72-252.8-222.72-97.28 0-183.04 57.344-224.64 147.456l-9.28 20.224-20.928 2.944c-103.36 14.4-178.368 104.32-178.368 214.72 0 117.952 88.832 214.4 196.928 214.4h512c88.32 0 157.504-75.136 157.504-171.712 0-88.064-65.92-164.928-144.96-171.776l-29.504-2.56-5.888-30.976z"
          fill="#262626" p-id="1616"></path>
      </svg>
    </button>


    <button @click="printwWordDrawer=true" class="other-btn">
      <svg t="1657990483331" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="2340" width="20" height="20">
        <path
          d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326z m1.8 562H232V136h302v216c0 23.2 18.8 42 42 42h216v494z"
          p-id="2341"></path>
        <path
          d="M528.1 472h-32.2c-5.5 0-10.3 3.7-11.6 9.1L434.6 680l-46.1-198.7c-1.3-5.4-6.1-9.3-11.7-9.3h-35.4c-1.1 0-2.1 0.1-3.1 0.4-6.4 1.7-10.2 8.3-8.5 14.7l74.2 276c1.4 5.2 6.2 8.9 11.6 8.9h32c5.4 0 10.2-3.6 11.6-8.9l52.8-197 52.8 197c1.4 5.2 6.2 8.9 11.6 8.9h31.8c5.4 0 10.2-3.6 11.6-8.9l74.4-276c0.3-1 0.4-2.1 0.4-3.1 0-6.6-5.4-12-12-12H647c-5.6 0-10.4 3.9-11.7 9.3l-45.8 199.1-49.8-199.3c-1.3-5.4-6.1-9.1-11.6-9.1z"
          p-id="2342"></path>
      </svg>
    </button>

    <button @click="refresh" class="other-btn">
      <svg t="1642952842497" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2448"
        width="20" height="20" class="icon">
        <path
          d="M927.999436 531.028522a31.998984 31.998984 0 0 0-31.998984 31.998984c0 51.852948-10.147341 102.138098-30.163865 149.461048a385.47252 385.47252 0 0 1-204.377345 204.377345c-47.32295 20.016524-97.6081 30.163865-149.461048 30.163865s-102.138098-10.147341-149.461048-30.163865a385.47252 385.47252 0 0 1-204.377345-204.377345c-20.016524-47.32295-30.163865-97.6081-30.163865-149.461048s10.147341-102.138098 30.163865-149.461048a385.47252 385.47252 0 0 1 204.377345-204.377345c47.32295-20.016524 97.6081-30.163865 149.461048-30.163865a387.379888 387.379888 0 0 1 59.193424 4.533611l-56.538282 22.035878A31.998984 31.998984 0 1 0 537.892156 265.232491l137.041483-53.402685a31.998984 31.998984 0 0 0 18.195855-41.434674L639.723197 33.357261a31.998984 31.998984 0 1 0-59.630529 23.23882l26.695923 68.502679a449.969005 449.969005 0 0 0-94.786785-10.060642c-60.465003 0-119.138236 11.8488-174.390489 35.217667a449.214005 449.214005 0 0 0-238.388457 238.388457c-23.361643 55.252253-35.22128 113.925486-35.22128 174.390489s11.8488 119.138236 35.217668 174.390489a449.214005 449.214005 0 0 0 238.388457 238.388457c55.252253 23.368867 113.925486 35.217667 174.390489 35.217667s119.138236-11.8488 174.390489-35.217667A449.210393 449.210393 0 0 0 924.784365 737.42522c23.368867-55.270316 35.217667-113.925486 35.217667-174.390489a31.998984 31.998984 0 0 0-32.002596-32.006209z"
          fill="" p-id="2449"></path>
      </svg>
    </button>

    <button @click="infomartion" class="other-btn">
      <svg t="1658047391496" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="2453" width="20" height="20">
        <path
          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
          p-id="2454"></path>
        <path d="M512 336m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="2455"></path>
        <path d="M536 448h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" p-id="2456">
        </path>
      </svg>
    </button>字数：{{content?cleanAllString(content).length:"0"}}


    <el-drawer title="导出word" :visible.sync="printwWordDrawer" direction="rtl" size="80%">
      <div style="width: 90%;margin-left: 5%;">
        文件名：<el-input v-model="wordName" placeholder="请输入文件名" class="fileName"></el-input>
        <el-button @click="printWord">导出</el-button>
      </div>
      <button @click="refresh" class="other-btn">
        <svg t="1642952842497" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2448"
          width="20" height="20" class="icon">
          <path
            d="M927.999436 531.028522a31.998984 31.998984 0 0 0-31.998984 31.998984c0 51.852948-10.147341 102.138098-30.163865 149.461048a385.47252 385.47252 0 0 1-204.377345 204.377345c-47.32295 20.016524-97.6081 30.163865-149.461048 30.163865s-102.138098-10.147341-149.461048-30.163865a385.47252 385.47252 0 0 1-204.377345-204.377345c-20.016524-47.32295-30.163865-97.6081-30.163865-149.461048s10.147341-102.138098 30.163865-149.461048a385.47252 385.47252 0 0 1 204.377345-204.377345c47.32295-20.016524 97.6081-30.163865 149.461048-30.163865a387.379888 387.379888 0 0 1 59.193424 4.533611l-56.538282 22.035878A31.998984 31.998984 0 1 0 537.892156 265.232491l137.041483-53.402685a31.998984 31.998984 0 0 0 18.195855-41.434674L639.723197 33.357261a31.998984 31.998984 0 1 0-59.630529 23.23882l26.695923 68.502679a449.969005 449.969005 0 0 0-94.786785-10.060642c-60.465003 0-119.138236 11.8488-174.390489 35.217667a449.214005 449.214005 0 0 0-238.388457 238.388457c-23.361643 55.252253-35.22128 113.925486-35.22128 174.390489s11.8488 119.138236 35.217668 174.390489a449.214005 449.214005 0 0 0 238.388457 238.388457c55.252253 23.368867 113.925486 35.217667 174.390489 35.217667s119.138236-11.8488 174.390489-35.217667A449.210393 449.210393 0 0 0 924.784365 737.42522c23.368867-55.270316 35.217667-113.925486 35.217667-174.390489a31.998984 31.998984 0 0 0-32.002596-32.006209z"
            fill="" p-id="2449"></path>
        </svg>
      </button>下载完成后请点击刷新按钮，刷新前将无法继续编辑。
    </el-drawer>

    <el-drawer title="表情选择" :visible.sync="drawer" :direction="direction" :modal="modal">
      <span>
        <img v-for="item in 215" style='width: 30px' :src="'http://qzonestyle.gtimg.cn/qzone/em/e'+(99+item)+'.gif'"
          onerror='imgerror(this)' @click="insertFace('http://qzonestyle.gtimg.cn/qzone/em/e'+(99+item)+'.gif')"
          v-if="!faces.tgarr1.includes((99+item))">
        <img v-for="item in 80" style='width: 30px' :src="'http://qzonestyle.gtimg.cn/qzone/em/e'+(10259+item)+'.gif'"
          onerror='imgerror(this)' @click="insertFace('http://qzonestyle.gtimg.cn/qzone/em/e'+(10259+item)+'.gif')"
          v-if="!faces.tgarr2.includes((10259+item))">
      </span>
    </el-drawer>

  </div>
</template>

<script>
  import {
    VueEditor
  } from "vue2-editor";
  import htmlDocx from 'html-docx-js/dist/html-docx'
  import saveAs from 'file-saver'
  import messageApi from "../api/message.js"
  import userApi from "../api/user.js"
  export default {
    //注册组件
    components: {
      VueEditor
    },
    created() {
      this.type = this.$route.query.type
      this.textId = this.$route.query.id
      this.content = localStorage.getItem("haust-rjxy-text-" + this.type + this.textId)
      this.timer = setTimeout(() => {
        this.saveLocation()
      }, 100000)
      this.$nextTick(() => {
        document.querySelector("div.ql-editor").style.background =
          `url("https://pic.imgdb.cn/item/61f2a9742ab3f51d91f9b810.png") right bottom / 180px no-repeat`;
        document.querySelector("div.ql-editor").style.minHeight = `${innerHeight-200}px`;
        if (this.type == "q") {
          document.querySelector("div.ql-toolbar").style.display = "none"
        }
      })
    },
    data() {
      return {
        textId: 1,
        type: "",
        content: "",
        canSaveLocation: true,
        printwWordDrawer: false,
        disabled: false,
        drawer: false,
        modal: false,
        wordName: "rjxy",
        direction: 'rtl',
        apiType: "imgbox",
        timer: null,
        faces: {
          num1: 100,
          num2: 10260,
          tgarr1: [102, 107, 110, 111, 117, 118, 119, 126, 131, 136, 137, 138, 143, 155,
            162, 164, 167, 170, 171, 172, 174, 238, 239, 251, 248, 255, 285, 286, 287, 288, 290, 293, 295,
            296, 300, 303, 305, 306, 307, 308, 309, 310, 314, 301, 101, 105, 115, 122, 123, 129, 141, 148, 153
          ],
          tgarr2: [10262, 10263, 10265, 10283, 10287, 10288,
            10266, 10267, 10268, 10269, 10271, 10272, 10281,
            10289, 10312, 10322, 10327, 10328, 10329, 10330, 10331,
            10279, 210, 10278, 10291, 10275, 10290, 10308, 10280, 10309,
            10321, 10310, 10313, 10316, 10335, 10276,
            10292, 259, 280, 281, 312, 10284, 10264, 10274
          ]
        }
      };
    },
    beforeRouteLeave(to, from, next) {
      clearTimeout(this.timer)
      console.log('关闭计时器')
      next(vm => {
        vm.$router.push(from.path)
      })
    },
    methods: {
      async handleImageAdded(file, Editor, cursorLocation, resetUploader) {
        let formData = new FormData();
        formData.append("image", file);
        // 发请求
        this.disabled = true
        this.$notify.info({
          title: '消息',
          message: '上传中，请稍等。上传期间无法编辑文字。'
        });
        await this.upload(formData).then((res) => {
          let url = res.data.data.url[this.apiType]
          if (url.indexOf("失败") != -1) {
            this.$notify.error({
              title: '错误',
              message: '上传失败，请重试'
            });
            return
          }

          Editor.insertEmbed(cursorLocation, "image", res.data.data.url[this.apiType]);
          this.disabled = false
        })
        resetUploader();
      },
      insertFace(url) {
        let edit = this.$refs.editor.quill
        edit.insertEmbed(edit.getSelection().index, "image", url);
      },
      infomartion() {
        this.$notify({
          title: '提示',
          dangerouslyUseHTMLString: true,
          message: '下方按钮依次为：添加表情、本地暂存、稿件上传、生成word。<br>同时每100s将自动保存1次。',
          duration: 0
        });
      },
      toUTF16(codePoint) {
        var TEN_BITS = parseInt('1111111111', 2);

        function u(codeUnit) {
          return '\\u' + codeUnit.toString(16).toUpperCase();
        }

        if (codePoint <= 0xFFFF) {
          return u(codePoint);
        }
        codePoint -= 0x10000;

        // Shift right to get to most significant 10 bits
        var leadSurrogate = 0xD800 + (codePoint >> 10);

        // Mask to get least significant 10 bits
        var tailSurrogate = 0xDC00 + (codePoint & TEN_BITS);

        return u(leadSurrogate) + u(tailSurrogate);
      },
      upload(formData) {
        return this.$axios({
          url: `https://www.hualigs.cn/api/upload?apiType=${this.apiType}&token=dbc28d865eeb34d94772b68fa3f7081d`,
          method: 'POST',
          data: formData,
        })
      },
      download() {
        this.$notify.warning({
          title: '请等待',
          message: '导入中，请稍后'
        })
        if (this.type === "news") {
          messageApi.getNews(this.textId).then((res) => {
            this.$notify.success({
              title: '成功',
              message: '导入成功'
            })
            let regex2 = /\{(.+?)\]/g;
            let str = res.data[0].message.replaceAll("div", "p")
            if (str.match(regex2) != null) {
              for (let emo of str.match(regex2)) {
                str = str.replace(emo, String.fromCodePoint(emo.replace(/\{/, "")
                  .replace(/\]/, "")));
              }
            }
            this.content = str
          })
          return
        }
        messageApi.getQ(this.textId).then((res) => {
          this.$notify.success({
            title: '成功',
            message: '导入成功'
          })
          let regex2 = /\{(.+?)\]/g;
          let str = res.data[0].message.replaceAll("div", "p")
          if (str.match(regex2) != null) {
            for (let emo of str.match(regex2)) {
              str = str.replace(emo, String.fromCodePoint(emo.replace(/\{/, "")
                .replace(/\]/, "")));
            }
          }
          this.content = str
        })
      },
      upQ() {
        if (this.type === "news") {
          this.upNews()
          return
        }
        this.$notify.warning({
          title: '请等待',
          message: '正在上传'
        })
        let word = ""
        const emojiReg =
          /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?(?:\u200d(?:[^\ud800-\udfff]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?)*/;
        for (let every of this.content) {
          if (emojiReg.test(every)) {
            word += "{" + every.codePointAt(0) + "]"
            continue
          }
          word += `${every}`
        }
        messageApi.upQ(this.textId, "message", word).then((res) => {
          if (res.code == 1 && res.data) {
            this.saveLocation()
            this.$notify.success({
              title: '成功',
              message: '成功上传服务器'
            })
          } else {
            let e = ""
            e = res.code == -3 ? "没有权限" : "Incorrect string value"
            this.$notify.error({
              title: '错误',
              message: `上传失败：${e}`
            });
          }
        })
      },
      upNews() {
        this.$notify.warning({
          title: '请等待',
          message: '正在上传'
        })
        let word = ""
        const emojiReg =
          /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?(?:\u200d(?:[^\ud800-\udfff]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?)*/;
        for (let every of this.content) {
          if (emojiReg.test(every)) {
            word += "{" + every.codePointAt(0) + "]"
            continue
          }
          word += `${every}`
        }
        messageApi.upNews(this.textId, word).then((res) => {
          if (res.code == 1 && res.data) {
            this.saveLocation()
            this.$notify.success({
              title: '成功',
              message: '成功上传服务器'
            })
          } else {
            let e = ""
            e = res.code == -3 ? "没有权限" : "Incorrect string value"
            this.$notify.error({
              title: '错误',
              message: `上传失败：${e}`
            });
          }
        })
      },
      refresh() {
        this.$router.replace("/refresh")
      },
      saveLocation() {
        if (!this.canSaveLocation) {
          return
        }
        localStorage.setItem("haust-rjxy-text-" + this.type + this.textId, this.type == "q" ? this.cleanWordString(this
            .content) :
          this.content)
        this.$message.success('保存成功');
      },
      parseImages() {
        //var html = CKEDITOR.instances.editor1.getData();
        let images = document.getElementById("quill-container").getElementsByTagName('img');
        for (let img of images) {
          this.getImageBase64(img.src).then((res) => {
            img.src = res
          });
        }
      },
      getImageBase64(url) {
        return new Promise((resolve, reject) => {
          var xhr = new XMLHttpRequest()
          xhr.open('get', url, true)
          xhr.responseType = 'blob'
          xhr.onload = function() {
            if (this.status === 200) {
              var blob = this.response
              var fileReader = new FileReader()
              fileReader.onloadend = function(e) {
                var result = e.target.result
                resolve(result)
              }
              fileReader.readAsDataURL(blob)
            }
          }
          xhr.onerror = function() {
            reject()
          }
          xhr.send()
        })
      },
      cleanWordString(html) {
        html = html.replace(/<\/?(SPAN)[^>]*>/gi, "");
        html = html.replace(/<(\w[^>]*) class=([^ |>]*)([^>]*)/gi, "<$1$3");
        html = html.replace(/<(\w[^>]*) style= "([^"]*) "([^>]*)/gi, "<$1$3");
        html = html.replace(/<(\w[^>]*) lang=([^ |>]*)([^>]*)/gi, "<$1$3");
        html = html.replace(/<\\?\?xml[^>]*>/gi, "");
        html = html.replace(/<\/?\w+:[^>]*>/gi, "");
        html = html.replace(/ /, " ");
        var re = new RegExp("(<P)([^>]*>.*?)(<\/P>)", "gi");
        html = html.replace(re, "<div$2</div>");
        return html;
      },
      cleanAllString(html) {
        html = html.replace(/<[^>]+>/g,"")
        return html;
      },
      printWord() {
        if (this.wordName == "") {
          return
        }
        this.parseImages()
        this.saveLocation()
        this.canSaveLocation = false
        this.disabled = true
        let html = `
        <!DOCTYPE html>
        <html>
          <head>
            <meta charset="utf-8">
            <title></title>
          </head>
          <body>
          ${this.content}
          </body>
        </html>
`
        var converted = htmlDocx.asBlob(html);
        saveAs(converted, this.wordName + '.docx');
        this.$notify({
          title: '提示',
          dangerouslyUseHTMLString: true,
          message: 'word已生成。在下载完成后，请点击刷新再继续编辑，没有刷新将不能编辑和保存。',
          duration: 0
        });
      }
    }
  };
</script>
<style scoped>
  .other-btn {
    background-color: white;
    border: 0;
    border-right: 2px #b3b3b3 solid;
    margin: 10px 0px;
    width: 40px;
  }

  .fileName {
    width: 60%;
  }
</style>
